<script setup>
import { ref, onMounted, computed, reactive } from "vue";
import { modalControllers } from "@/stores/modalController.js";
import NewPlanModal from "@/components/alert/training_plan/NewPlanModal.vue";
import { usePlanStores } from "@/stores/training-plan.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/stores/user.js";

const userStore = useUserStore();
const modalController = modalControllers();
const planStore = usePlanStores();
planStore.getMyPlanning(userStore.user.id);
const searchForm = reactive({
  name: "",
  planType: "",
  dateRange: [],
});
const resetFilter = () => {
  searchForm.value = {
    name: "",
    planType: "",
    dateRange: [],
  };
};
const formatDate = (dateString) => {
  if (!dateString) return "";
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
const trainingPlans = computed(() => planStore.plans);
const filteredPlans = computed(() => {
  return trainingPlans.value.filter((item) => {
    const nameMatch =
      !searchForm.name || item.plan.title.includes(searchForm.name);
    const typeMatch =
      !searchForm.planType ||
      item.plan.category.toString() === searchForm.planType;

    return nameMatch && typeMatch;
  });
});

const handleEdit = (row) => {
  modalController.openPopup("editPlanModal");
};

const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除培训计划 "${row.plan.title}" 吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功!",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
</script>

<template>
  <!-- 主要内容 -->
  <div class="container-fluid p-4">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24" class="mb-4">
        <el-card class="box-card stats-card" shadow="hover">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="bg-primary bg-gradient text-white rounded-circle p-3">
                <i class="bi bi-calendar-check"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mb-1 text-muted">活跃培训计划</h6>
              <h4 class="mb-0">24</h4>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24" class="mb-4">
        <el-card class="box-card stats-card" shadow="hover">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="bg-success bg-gradient text-white rounded-circle p-3">
                <i class="bi bi-people"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mb-1 text-muted">参与人员</h6>
              <h4 class="mb-0">156</h4>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24" class="mb-4">
        <el-card class="box-card stats-card" shadow="hover">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="bg-info bg-gradient text-white rounded-circle p-3">
                <i class="bi bi-file-earmark-text"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mb-1 text-muted">计划模板</h6>
              <h4 class="mb-0">8</h4>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24" class="mb-4">
        <el-card class="box-card stats-card" shadow="hover">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="bg-warning bg-gradient text-white rounded-circle p-3">
                <i class="bi bi-graph-up"></i>
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="mb-1 text-muted">平均完成率</h6>
              <h4 class="mb-0">78%</h4>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <el-row class="mb-4">
      <el-col :span="24" class="text-end">
        <el-button
          type="success"
          @click="modalController.openPopup('newPlanModal')"
          ><i class="bi bi-plus-circle me-2"></i>创建培训计划
        </el-button>
      </el-col>
    </el-row>

    <!-- 筛选器 -->
    <el-card class="box-card shadow-sm mb-4">
      <template #header>
        <div class="card-header">
          <h5 class="mb-0">筛选培训计划</h5>
        </div>
      </template>
      <el-form :model="searchForm" :inline="true" class="filter-form">
        <el-row :gutter="20">
          <el-form-item label="考核名称">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入考核名称"
            ></el-input>
          </el-form-item>
          <el-col :span="6">
            <el-form-item label="计划类型">
              <el-select
                v-model="searchForm.planType"
                placeholder="所有类型"
                clearable
                style="width: 200px"
              >
                <el-option label="所有类型" value=""></el-option>
                <el-option label="理论学习" value="0"></el-option>
                <el-option label="实操训练" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="searchForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetFilter">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 培训计划列表 -->
    <el-card class="box-card shadow-sm mb-4">
      <template #header>
        <div class="card-header">
          <h5 class="mb-0">培训计划列表</h5>
        </div>
      </template>
      <el-table :data="filteredPlans" style="width: 100%">
        <el-table-column
          prop="plan.title"
          label="计划名称"
          width="180"
        ></el-table-column>
        <el-table-column prop="plan.categoryName" label="计划类型" width="120">
          <template #default="scope">
            <el-tag class="me-1 mb-1">
              {{ scope.row.plan.category === 1 ? "实操训练" : "理论学习" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="plan.startDate" label="开始日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.plan.startDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="plan.endDate" label="结束日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.plan.endDate) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="plan.createdBy"
          label="创建人"
          width="120"
        ></el-table-column>
        <el-table-column prop="plan.createdAt" label="创建时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.plan.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="包含课程">
          <template #default="scope">
            <el-tag
              v-for="course in scope.row.courses"
              :key="course.course.id"
              class="me-1 mb-1"
            >
              {{ course.course.title }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)"
              >编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <new-plan-modal
    v-model="modalController.popups.newPlanModal"
  ></new-plan-modal>
</template>

<style scoped>
@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons.css";

.stats-card .bg-primary {
  background-color: #007bff !important;
}

.stats-card .bg-success {
  background-color: #28a745 !important;
}

.stats-card .bg-info {
  background-color: #17a2b8 !important;
}

.stats-card .bg-warning {
  background-color: #ffc107 !important;
}

.stats-card .rounded-circle {
  border-radius: 50% !important;
}

.stats-card .p-3 {
  padding: 1rem !important;
}

.stats-card .text-white {
  color: #fff !important;
}

.stats-card .d-flex {
  display: flex !important;
}

.stats-card .align-items-center {
  align-items: center !important;
}

.stats-card .flex-shrink-0 {
  flex-shrink: 0 !important;
}

.stats-card .flex-grow-1 {
  flex-grow: 1 !important;
}

.stats-card .ms-3 {
  margin-left: 1rem !important;
}

.stats-card .mb-1 {
  margin-bottom: 0.25rem !important;
}

.stats-card .mb-0 {
  margin-bottom: 0 !important;
}

.stats-card .text-muted {
  color: #6c757d !important;
}

.filter-form .el-form-item {
  margin-bottom: 0;
}

.filter-form .el-date-editor--daterange.el-input__wrapper {
  width: 100%;
}

.text-end {
  text-align: right;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}
</style>
